<template>
    <div class="fluid container">
        <div class="form-group form-group-lg panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Sortable control</h3>
            </div>
            <div class="panel-body">
                <div class="checkbox">
                    <label><input type="checkbox" v-model="editable">Enable drag and drop</label>
                </div>
                <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
            </div>
            <form-item></form-item>
        </div>
        <div class="demo-split">
            <Split v-model="split1">
                <div slot="left" class="demo-split-pane">
                    <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" :move="onMove"
                               @start="isDragging=true" @end="isDragging=false">
                        <transition-group type="transition" :name="'flip-list'">
                            <li class="list-group-item" v-for="element in list" :key="element.order">
                                <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                                   @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
                                {{element.name}}
                                <span class="badge">{{element.order}}</span>
                            </li>
                        </transition-group>
                    </draggable>
                </div>

                <div slot="right" class="demo-split-pane">
                    <draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove">
                        <transition-group name="no" class="list-group" tag="ul">
                            <li class="list-group-item" v-for="element in list2" :key="element.order">
                                <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                                   @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
                                {{element.name}}
                                <span class="badge">{{element.order}}</span>
                            </li>
                        </transition-group>
                    </draggable>
                </div>
            </Split>
        </div>
        <Row>
            <Col span="12">
                <pre>{{listString}}</pre>
            </Col>
            <Col span="12">
                <pre>{{list2String}}</pre>
            </Col>
        </Row>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import FormItem from './components/form-item'

const message = [
  'vue.draggable',
  'draggable',
  'component',
  'for',
  'vue.js 2.0',
  'based',
  'on',
  'Sortablejs'
]

export default {
  name: 'hello',
  components: {
    draggable,
    FormItem
  },
  data () {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1, fixed: false }
      }),
      split1: 0.2,
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    }
  },
  methods: {
    orderList () {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order
      })
    },
    onMove ({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      )
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    },
    listString () {
      return JSON.stringify(this.list, null, 2)
    },
    list2String () {
      return JSON.stringify(this.list2, null, 2)
    }
  },
  watch: {
    isDragging (newValue) {
      if (newValue) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    }
  }
}
</script>

<style>
    .demo-split {
        height: 200px;
        border: 1px solid #dcdee2;
    }

    .demo-split-pane {
        padding: 10px;
    }

    .flip-list-move {
        transition: transform 0.5s;
    }

    .no-move {
        transition: transform 0s;
    }

    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    .list-group {
        min-height: 20px;
    }

    .list-group-item {
        cursor: move;
    }

    .list-group-item i {
        cursor: pointer;
    }
</style>
